{% extends "base.html" %}

{% block content %}

<div id="menu-toolbar" class="ui-state-active">
    <ul class ="right">
    </ul>
    <ul class ="left">
        <li><a href="/iterations?project_id={{ project_backlog.get_project.key.id }}">{{ project_backlog.get_project.name }}</a></li>
    </ul>
</div>

<div id ="title-container">
    <h2>{{ project_backlog.get_project.name }} - Backlog</h2>
</div>

<div id="table-contain" class="ui-widget">
    <table class="ui-widget ui-widget-content">
        <col width="20%" />
        <col width="10%" />
        <col width="10%" />
        <col width="10%" />
        <col width="13%" />
        <col width="13%" />
        <col width="15%" />
        <thead>
            <tr class="ui-widget-header" >
                <th>Name</th>
                <th>Status</th>
                <th>Category</th>
                <th>Priority</th>
                <th>Opened By</th>
                <th>Assigned To</th>
                <th>Estimated Time</th>
            </tr>
        </thead>
        <tbody>
            {% for story in project_backlog.stories %}
            {% ifequal story.status "Closed" %}
            <tr class="task_done">
                {% else %}
            <tr>
                {% endifequal %}
                <td><a href="/story?id={{ story.key.id }}"> {{ story.name|escape }}</a></td>
                <td>{{ story.status }}</td>
                <td>{{ story.category }}</td>
                <td>{{ story.priority }}</td>
                <td>{{ story.opened_by }}</td>
                <td>{{ story.assigned_to }}</td>
                <td><div id="pb_{{ story.key.id }}" val="{{ story.percentage }}"></div></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('div:[id^=pb_]').each(function() {
            percentage = parseFloat($(this).attr('val'));
            $(this).progressbar({value:percentage});
        });
        $(function() {
            $( "input:button, a", ".button").button();
        });
    });

</script>

{% endblock %}
